<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>在线预订</title>
		<meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no">
		<meta name="apple-mobile-web-app-capable" content="yes">
		<meta name="apple-mobile-web-app-status-bar-style" content="black">
		<link rel="stylesheet" href="../css/mui.min.css">
		<link rel="stylesheet" href="../css/pravate/common.css" />
		<script src="../js/mui.min.js"></script>
		<script type="text/javascript" src="../js/jquery-2.1.0.js"></script>
		<script type="text/javascript" src="../js/mobile-detect.min.js" ></script>
		<script type="text/javascript" src="../js/config.js" ></script>
		<script type="text/javascript" src="../js/common.js"></script>
		<style>
			.bar-right{
				position: absolute;
				width: 88px;
				height: 44px;
				z-index: 9999;
				right: 0;
				font-size: 0;
			}
			.right-item{
				display: inline-block;
				width: 50%;
				height: 44px;
				font-size: 12px;
				text-align: center;
				padding: 7px 0;
			}
			.right-item img{
				display: block;
				width: 15px;
				height: 15px;
				margin: 0 auto;
			}
			#nav{
				margin-top: 44px;
				padding: 0;
				font-size: 0;
				background: #fff;
				margin-bottom: 10px;
			}
			#nav li{
				display: inline-block;
				width: 20%;
				font-size: 14px;
				color: #333333;
				line-height: 14px;
				text-align: center;
				padding: 5px 0;
			}
			#nav li span{
				display: inline-block;
				padding: 10px 5px;
			}
			#list{
				padding: 0 15px;
			}
			.list-item{
				background: #fff;
				border-radius: 5px;
				padding: 10px;
				margin-bottom: 15px;
			}
			.orderId{
				font-size: 14px;
				color: #333333;
				line-height: 14px;
				margin: 0;
				padding-bottom: 10px;
				border-bottom: 1px solid #e7e7e7;
			}
			.orderId span{
				color: #999;
				float: right;
			}
			.orderInfo{
				padding: 10px 0;
				display: flex;
			}
			.orderInfo img{
				width: 45px;
				height: 45px;
				border-radius: 22.5px;
				margin-right: 10px;
			}
			.other h5{
				font-size: 12px;
				color: #333333;
				line-height: 12px;
			}
			.time{
				margin: 0;
				margin-top: 5px;
			}
			.startTime, .endTime{
				padding: 0 20px 0 5px;
				color: #FF4400;
				font-size: 12px;
			}
			/*橘黄色*/
			.text-croci{
				color: #FF4400 !important;
			}
			/*浅蓝色*/
			.text-bluish{
				color: #1E82D2 !important;
			}
			/*深黑色*/
			.text-black{
				color: #000 !important;
			} 
			/*灰色*/
			.text-gray{
				color: #999 !important;
			}
		</style>
	</head>
	<body>
		<header class="mui-bar mui-bar-nav">
			<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
			<h1 class="mui-title">在线预订</h1>
			<div class="bar-right">
				<div class="right-item setting">
					<img src="../img/set.png"/>
					设置</div>
				<div class="right-item search">
					<img src="../img/search.png"/>
					查询</div>
			</div>
		</header>
		<ul id="nav">
			<li>
				<span style="border-bottom: 2px solid #2F81D2;">全部</span>
			</li>
			<li class="pageTitle" data-id='1'>
				<span>待确认</span>
			</li>
			<li class="pageTitle" data-id='2'>
				<span>待入住</span>
			</li>
			<li class="pageTitle" data-id='3'>
				<span>已入住</span>
			</li>
			<li class="pageTitle" data-id='0'>
				<span>已取消</span>
			</li>
		</ul>
		<div id="pullrefresh">
			<ul id="list">
				<script type="text/template" id="listTemple">
					{{if status=="success"}}
						{{each data as value i}}
							<li class="list-item" data-id='{{value.order_sn}}'>
								<p class="orderId">订单号：{{value.order_sn}}<span class="span {{pay_status(value.status)}}">{{value.order_type_z}}</span></p>
								<div class="orderInfo">
									<img src="{{value.d_picture}}" />
									<div class="other">
										<h5>房型：{{value.roomClassName}}</h5>
										<p class="time">入住
											<span class="startTime">{{value.start_time}}
											</span>离店<span class="endTime">{{value.end_time}}</span>
											<span>{{value.newDays}}晚</span>
										</p>
									</div>
								</div>
							</li>
						{{/each}}
					{{/if}}
				</script>
			</ul>
		</div>
		
		<script type="text/javascript" src="../js/template-web.js"></script>
		<script>
			mui.init({
				pullRefresh: {
					container: '#pullrefresh',
					down: {
						style: 'circle',
						callback: pulldownRefresh
					},
					up: {
						auto: true,
						contentrefresh: '正在加载...',
						callback: pullupRefresh
					}
				}
			});
			var count = 1;
			var page= 1;
			var limit = 10;
			var order_type = 50;
			function pullupRefresh() {
				require(weburl + BookingOrderList, "json", "post", {
					token: localStorage.getItem("token"),
					page: page++, 
					limit: limit
				}, function(response) {
					console.log(JSON.stringify(response));
					if(response.status == "error") {
						//参数为true代表没有更多数据了。
						mui('#pullrefresh').pullRefresh().endPullup(true);
						return false; 
					}
					if(response.data.length < limit) {
						mui('#pullrefresh').pullRefresh().endPullup(true);
						upAddData(response); 
						return false;
					}
					setTimeout(function() {
						mui('#pullrefresh').pullRefresh().endPullup(false); //参数为true代表没有更多数据了。
						upAddData(response);
					}, 1500);
				}, function(xhr) {
					mui('#pullrefresh').pullRefresh().endPullup(true);
					console.log(JSON.stringify(xhr));
				})
			} 
			//交易状态 
			template.defaults.imports.pay_status=function(num) {
				var sta = "";
				switch(num*1) {
					case 0:
						//已取消
						sta = "text-gray";
						break;
					case 1:
						//待确认
						sta = "text-croci";
						break;
					case 2:
						//待入住
						sta = "text-bluish";
						break;
					case 3:
					    //已入住
						sta = "text-black";
						break;
					case 4:
					    //已离店
						sta = "text-gray";
						break;
				}
				return sta;
			}
			function upAddData(resData) {
				var str = template("listTemple",resData);
				$("#list").append(str);
			}

			function downAddData(resData) {
				//清空记录
				$("#list").html("");
				var str = template("listTemple",resData);
				$("#list").html(str);
			}
			/**
			 * 下拉刷新具体业务实现
			 */
			function pulldownRefresh() {
				page = 1;
				require(weburl + BookingOrderList, "json", "post", {
					token: localStorage.getItem("token"),
					page: page++,
					limit: limit
				}, function(response) {
					if(response.status==='success'){
						setTimeout(function() {
							downAddData(response);
							mui('#pullrefresh').pullRefresh().endPulldown();
						}, 1500);
					}
				}, function() {
				})
			}
			//页面跳转
			mui('body').on('tap','.pageTitle',function(){
				var title=$(this).children().html();
				console.log(title)
				mui.openWindow({
					url: "reservationItem.html",
					id: "reservationItem.html",
					extras: {
						title: title+'订单列表',
						status: $(this).attr('data-id')
					}
				})
			})
			//跳转到详情页
			mui('body').on('tap','.list-item',function(){
				mui.openWindow({
					url: "reserDetail.html",
					id: "reserDetail.html",
					extras: { 
						orderId: $(this).attr('data-id')
					}
				})
			})
			//跳转到房型设置页面
			mui('body').on('tap','.setting',function(){
				mui.openWindow({
					url: "roomset.html",
					id: "roomset.html"
				})
			})
			//点击查询
			mui('body').on('tap','.search',function(){
				mui.prompt(' ','请输入订单号','',['查询','取消'],function(e){
					if(e.index==0){
						if(e.value===''){
							mui.alert('请输入订单号','','关闭',function(){},'div');
						}else{
							mui.openWindow({
								url: "reservationItem.html",
								id: "reservationItem.html",
								extras: {
									title: '查询结果',
									order_sn: e.value
								}
							})
						}
					}
				},'div')
			})
		</script>
	</body>

</html>